import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {ComponentPropsType, getComponentConfByType} from "../../../components/QuestionComponents";
import {useDispatch} from "react-redux";
import {changeComponentProps} from "../../../store/componentsReducer";

const NoProp = () => {
    return (
        <div style={{textAlign: 'center'}}>
            未选中组件
        </div>
    );
};
export const ComponentProp = () => {
    const dispatch = useDispatch()
    const {selectedComponent} = useGetComponentInfo()
    if (selectedComponent == null) return <NoProp/>

    const {type, props,isLocked,isHidden} = selectedComponent
    const componentConf = getComponentConfByType(type);
    if (componentConf == null) return <NoProp/>

    function changeProps(newProps: ComponentPropsType) {
        if (selectedComponent == null) return
        const {fe_id} = selectedComponent
        dispatch(changeComponentProps({fe_id, newProps}))
    }

    const {PropComponent} = componentConf
    return <PropComponent {...props} onChange={changeProps} disable={isLocked || isHidden}/>
};